<template>

    <el-input v-model="captcha.code_val" autocomplete="off" placeholder="图片验证码" v-on:change="$emit('change',captcha.code_id,captcha.code_val)">
        <template slot="append" >
            <div class="p-0" :style="{width:imgWidth+'px',height:imgHeight+'px',margin:'0 -19px'}">
                <img :src="codeSrc" :width="imgWidth" :height="imgHeight" style="cursor: pointer;}" @click="loadImage($event)"/>
            </div>

        </template>
    </el-input>

</template>

<script>

    export default {
        props: {
            imgWidth: {
                type: Number,
                default: 120
            },
            imgHeight: {
                type: Number,
                default: 35
            },
        },
        data() {
            return {
                captcha: {
                    code_val: '',
                    code_id: ''
                },
                codeSrc: '',
            }
        },
        created() {
            this.loadImage();
        },
        methods: {

            loadImage: function (event) {
                let _this = this;

                if (event) event.preventDefault();
                LeRoute.quiet().request('api.l-e-s.captcha.image',{h: _this.imgHeight, w: _this.imgWidth}).then(function (res) {

                    var _tatus = res.status || false;
                    if (_tatus) {
                        _this.captcha.code_id = res.data.code_id || '';
                        _this.codeSrc = res.data.code_img || '';
                        return false;
                    }


                });


            }
        }
    }
</script>
